<template>
  <a-card title="ISO资源回访" :style="{ marginTop: '20px' }">
    <s-table
      ref="table"
      bordered
      :row-key="(record) => record.customer_id"
      :columns="isoColumns"
      :data="isoData"
    >
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`筛选${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          筛选
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="phone" slot-scope="text, record">
        {{ text }} <a-icon type="phone" theme="filled" :style="{ color: '#1890ff', cursor: 'pointer' }" @click="makePhone(record.customer_id)" />
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" :style="{ marginRight: '10px' }" @click="$router.push({ name: 'AddContract', query: {customer_id: record.customer_id} })">做合同</a-button>
        <a-button type="primary" size="small" @click="$router.push({ name: 'CustomerDetail', params: {id: record.customer_id} })">详情</a-button>
      </template>
    </s-table>
    <phone-modal v-if="modalVisible" :customer-id="customerId" @cancel="modalExit"></phone-modal>
  </a-card>
</template>

<script>
import { STable, PhoneModal } from '@/components'
import col from '@/columns/adviser'
import { getIsoCustomer } from '@/api/customer'

export default {
  components: {
    STable,
    PhoneModal
  },
  name: 'IsoCustomer',
  data () {
    return {
      isoColumns: col.reject,
      isoData: parameters => {
        return getIsoCustomer(parameters).then(res => {
          return res.result
        })
      },
      customerId: '',
      modalVisible: false
    }
  },
  methods: {
    modalExit (visible) {
      this.modalVisible = visible
    },
    makePhone (id) {
      this.customerId = id
      this.modalVisible = true
    },
    /**
     * o
     * @param selectedKeys
     * @param confirm
     * @param dataIndex
     */
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    /**
     * 清除
     * @param clearFilters
     */
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    }
  }
}
</script>

<style scoped>

</style>
